<style lang='scss' scoped>
  .m-wrap{
    position: relative;
    height: 250px;
    display: flex;
    border-top: 1px solid rgba(200,200,200,1);
    margin-bottom: 2px;
  }

  .m-img-box{
    position: relative;
    width: 250px; height: 250px;
    &>.m-user-img{
      width: 100%; height: 100%;
    }
    &>.m-vip{
      position: absolute;
      width: 80px; height: 40px;
      background: black;
      text-align: center;
      line-height: 40px;
      font-size: 22px;  right: 0; bottom: 0;
      color: #fff;
    }
  }

  .m-right{
    flex: 1;text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
  }

  .m-name{
    height: 48px;
    line-height: 48px;
    color: #303641;
    font-size:34px;
    margin-top: 20px;
  }

  .m-text-item{
    position: absolute;
    top: 140px;
    width: 60%;
    height:40px;
    font-size:28px;
    color:#303641;
    line-height:40px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .m-text-item-2{
    @extend .m-text-item;
    top: 190px;
  }

  .m-bianji{
    position: absolute;
    width: 28px; height: 38px;
    right: 0;
    bottom: 20px;
    color: #fff;
  }
</style>

<template>
  <div class="m-wrap">
    <div class="m-img-box">
      <img :src="item.usericon" class="m-user-img">
       <div class="m-vip" v-if="item.state=='black'">已禁用</div>
    </div>
    <div class="m-right">
      <div class="m-name">{{item.username || '暂无'}}</div>
      <div class="m-text-item">{{item.duty || '暂无'}}</div>
      <div class="m-text-item-2">管理权限: {{item.auth | authStr}}</div>
    </div>
    <!--<img src="" class="m-bianji" @click="$emit('update')">-->
  </div>
</template>

<script>
  const authObj = {
    frame: '框条库',
    matcard: '卡纸库',
    background: '背景库',
    sence: '场景库',
    user: '用户管理',
    shop: '商户管理',
    factory: '厂家管理',
    viptime: 'VIP时间管理',
    price: 'VIP价格管理'
  }
  export default {
    data () {
      return {

      }
    },

    components: {},

    computed: {

    },

    props: {
      item: {
        type: Object,
        default () {
          return {}
        }
      }
    },

    mounted () {

    },

    methods: {

    },
    filters: {
      authStr (v) {
        if (v) {
          var str = v.split(/#|,/).map(itm => {
            if (itm) {
              return authObj[itm]
            }
          }).join(',')
          if (str.slice(-1) === ',') {
            return str.slice(0, -1)
          } else {
            return str
          }
        } else {
          return '暂无'
        }
      }
    }
  }

</script>
